<template>
  <div class="w-full h-full min-h-screen box-border relative">  
    <van-nav-bar 
      left-arrow 
      :title="$t('pageTitle.bankCard')" 
      @click-left="router.back()" 
      safe-area-inset-top 
    />
    <van-form @submit="submit" class="!mt-4">
      <van-field 
        :label="$t('label.receivingBank')"
        v-model="params.bankName"  
        name="bankName"
        clearable 
        :readonly="disabled"
        :placeholder="$t('placeholder.enterReceivingBank')"
      />
      <van-field 
        :label="$t('label.receivingAccount')"
        v-model="params.bankAccount"  
        name="bankAccount"
        clearable 
        :readonly="disabled"
        :placeholder="$t('placeholder.enterReceivingAccount')"
      />
      <van-field 
        :label="$t('label.receivingName')"
        v-model="params.userName"  
        name="userName"
        clearable 
        :readonly="disabled"
        :placeholder="$t('placeholder.enterReceivingName')"
      />
      <van-cell class="!hidden" />
      <div class="mt-14 mx-6">
        <van-button 
          round 
          block 
          type="primary" 
          native-type="submit" 
          color="#000"
          :loading="loading"
          v-if="!disabled"
        >
          <span class="text-white text-[16px]">
            {{ $t('btnText.submitData') }}
          </span>
        </van-button>
        <van-button 
          round 
          block 
          type="primary" 
          color="#000"
          @click="handleClick()"
          v-else
        >
          <span class="text-white text-[14px]">
            {{ $t('delBank') }}
          </span>
        </van-button>
      </div>
    </van-form>
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script setup lang="ts">
import { showConfirmDialog, showToast } from "vant"

import { useRouter } from "vue-router"

import { useI18n } from 'vue-i18n'

import { useUserStore } from "@/store/user"

import { addBankCard, delBankCard } from "@/service/login"

const { t } =  useI18n({ useScope: 'global' })

const router = useRouter()

const user = useUserStore()

const disabled = computed(() => !!user.defaultBank)

const loading = ref<boolean>(false)

const params = ref({
  bankName: "",
  bankAccount: "",
  userName: "",
  defaultCard: true
})

onBeforeMount(() => {
  user.loadDefaultBank()
  if(!!!user.defaultBank) return 
  params.value = {
    bankName: user.defaultBank.bankName,
    bankAccount: user.defaultBank.accountNo,
    userName: user.defaultBank.realname,
    defaultCard: true
  }
})

// 删除银行卡
const handleClick = async () => {
  showConfirmDialog({
    title:  t('logoutTipsTitle'),
    message: t('delBankTips')
  }).then(async () => {
    await delBankCard([user.defaultBank.id.toString()])
    await user.loadDefaultBank()
    window.location.reload()
  }).catch(() => {})
}

const submit = async () => {
  try {
    loading.value = true

    const res = await addBankCard({ 
      realname: params.value.userName,
      bankName: params.value.bankName,
      accountNo: params.value.bankAccount,
      defaultCard: params.value.defaultCard
    })

    loading.value = false 

    if(!res.success) return 

    showToast(res.message)

    await user.loadDefaultBank()

    setTimeout(() => {
      router.back()
    }, 500)

  } catch(err){
    loading.value = false
    throw err
  }
}
</script>

<style lang="less" scoped></style>
